<!DOCTYPE html>
<html class="x-admin-sm">
<head>
    <meta charset="UTF-8">
    <title>宇成建筑</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="stylesheet" href="../statics/css/font.css">
    <link rel="stylesheet" href="../statics/plugins/layui/css/layui.css">
    <link rel="stylesheet" href="../statics/css/xadmin.css">
    <link rel="stylesheet" href="../statics/css/style.css">
    <style>
        .layui-form-checkbox i{
            width:20px;
            height: 20px;
            border-left: 1px solid #c2c2c2;
        }
        .layui-icon-ok:before {
            content: "\e605";
            position: absolute;
            top: -3px;
            left: -1px;
            width: 16px;
            height: 16px;
            text-align: center;
            line-height: 20px;
        }
        .layui-form-checked i{
            border: 1px solid #5FB878;
        }
        .layui-form-checkbox{
            margin-right: 0;
        }
        b{
            white-space: nowrap;  /*强制span不换行*/
            display: inline-block;
        }
        .Qx_box:first-child{
            padding-top: 0;
        }
        .Qx_box {
            padding-top: 14px;
            padding-bottom: 14px;
            border-bottom: 1px dashed #c6c6c6;
        }
        .save{
            width:100px;
            margin: 10px 0;
        }
        .labelAuto .layui-form-item{
            margin-bottom: 15px;
        }
    </style>
</head>

<body class='labelAuto'>
    <div class="x-nav">
        <span class="layui-breadcrumb">
            <a href="welcome.html">首页</a>
            <a href="javascript:;">账号管理</a>
            <a>
                <cite>角色列表</cite>
            </a>
        </span>
        <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
            onclick="location.reload()" title="刷新">
            <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
        </a>
        <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right;margin-right:10px"
            onclick="window.history.go(-1)" title="后退">
            <i class="iconfontBlod" style="line-height:30px">&#xe74f;</i>
        </a>
    </div>
    <div class="layui-fluid">
        <div class="layui-d layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-body search">
                        <form action="" class="layui-form livingList">
                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <label class="layui-form-label">角色名称</label>
                                    <div class="layui-input-block">
                                        <input type="text" class="layui-input userName" readonly="readonly">
                                    </div>
                                </div>
                            </div>
                            <div class="layui-row">
                                <div class="content-main layui-col-xs12">
                                    <div class="layui-col-xs2 allQx">
                                        <b>
                                            <input type="checkbox" lay-filter='xuan' title='设置权限' lay-skin="primary"/>
                                        </b>
                                    </div>
                                    <div class="layui-col-xs10 allQx_box"></div>
                                </div>
                            </div>
                            <div class="layui-row">
                                <button class="layui-btn save" type='button'>保存</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script src="../statics/plugins/layui/layui.js" charset="utf-8"></script>
<script src='../statics/plugins/jQuery-3.2.1/jquery-3.2.1.min.js'></script>
<script type="text/javascript" src="../statics/plugins/X-admin/xadmin.js"></script>
<script type="text/javascript" src="../statics/js/public.js?v=1129"></script>
<script type="text/javascript">
    layui.use(['form', 'layer', "table", "laydate"], function () {
        var table = layui.table;
        var form = layui.form;
        var laydate = layui.laydate;
        var layer = layui.layer;
        $('.userName').val(localStorage.getItem('name'))
        $.ajax({
            url:url+'/auth/permission/lists',
            type:"post",
            async:false,
            data:{
                isProject:Number(localStorage.getItem('permission_id')),
                token:$.parseJSON(localStorage.getItem('login_msg')).token
            },
            success:function(r){
                if(r.code==100000){
                    var div='';
                    for(var i=0;i<r.data.length;i++){
                        if(r.data[i].children!=""){
                            div+=`<div class="layui-col-xs12 Qx_box">`
                            for(var j=0;j<r.data[i].children.length;j++){
                                div+=`<div class='layui-col-xs12'>
                                        <div class="layui-col-xs2 Qx_left">`
                                            if(j<=0){
                                                div+=`
                                                    <b>
                                                        <input type="checkbox" data-id='${r.data[i].id}' lay-filter='one' title='${r.data[i].name}' lay-skin="primary"/>
                                                    </b>
                                                `
                                            }
                                    div+=`</div>
                                        <div class="layui-col-xs2 Qx_two">
                                            <b>
                                                <input type="checkbox" lay-filter='two' data-id='${r.data[i].children[j].id}' title='${r.data[i].children[j].name}' lay-skin="primary"/>
                                            </b>
                                        </div>
                                        <div class="layui-col-xs8 Qx_right">`
                                            for(var l=0;l<r.data[i].children[j].children.length;l++){
                                                div+=`
                                                    <b>
                                                        <input type="checkbox" lay-filter='three' data-id='${r.data[i].children[j].children[l].id}' title='${r.data[i].children[j].children[l].name}' lay-skin="primary"/>
                                                    </b>
                                                `
                                            }
                                    div+=`</div>
                                    </div>
                                `
                            }
                            div+=`</div>`
                        }else{
                            div+=`
                                <div class="layui-col-xs12 Qx_box">
                                    <div class='layui-col-xs12'>
                                        <div class="layui-col-xs2 Qx_left">
                                            <b>
                                                <input type='checkbox' lay-filter='one' data-id='${r.data[i].id}' title='${r.data[i].name}' lay-skin="primary">
                                            </b>
                                        <div>
                                    </div>
                                </div>
                            `
                        }
                    }
                    $('.allQx_box').html(div);
                    form.render();
                }
            }
        })
        $.ajax({
            url:url+'/auth/role/getPermission',
            type:"post",
            data:{
                roleId:Number(localStorage.getItem('roleId')),
                token:getToken()
            },
            success:function(r){
                if(r.code==100000){
                    for(var i=0;i<$('.allQx_box input').length;i++){
                        for(var j=0;j<r.data.length;j++){
                            if($('.allQx_box input').eq(i).data('id')==r.data[j].permissionId){
                                $('.allQx_box input').eq(i).prop('checked',true);
                                form.render();
                            }
                        }
                    }
                }
            }
        })
        form.on('checkbox(xuan)', function(data){
            $('.allQx_box input').prop('checked',$(this).prop('checked'));
            form.render();
        });   
        form.on('checkbox(one)', function(data){
            $(this).parent().parent().parent().parent().find('input').prop('checked',$(this).prop('checked'));
            form.render();
        });    
        form.on('checkbox(two)', function(data){
            if($(this).prop('checked')==true){
                $(this).parent().parent().parent().find('input').prop('checked',true);
                if($(this).parent().parent().prev().find('input').length>0){
                    $(this).parent().parent().prev().find('input').prop('checked',true);
                }else{
                    $(this).parent().parent().parent().parent().find('input:first').prop('checked',true);
                }
            }else{
                $(this).parent().parent().next().find('input').prop('checked',false);
            }
            form.render();
        }); 
        form.on('checkbox(three)', function(data){
            if($(this).prop('checked')==true){
                $(this).parent().parent().prev().find('input').prop('checked',true);
                if($(this).parent().parent().prev().prev().find('input').length>0){
                    $(this).parent().parent().prev().prev().find('input').prop('checked',true);
                }else{
                    $(this).parent().parent().parent().parent().find('.layui-col-xs12:first .Qx_left input').prop('checked',true);
                }
            }
            form.render();
        });
        $('body').on('click','button.save',function(){
            var data=[];
            for(var i=0;i<$('.allQx_box input:checked').length;i++){
                data.push(Number($('.allQx_box input:checked').eq(i).data('id')));
            }
            $.ajax({
                url:url+'/auth/role/setPermission',
                type:"post",
                traditional: true,
                contentType: "application/json; charset=utf-8",
                data:JSON.stringify({
                    roleId:Number(localStorage.getItem('roleId')),
                    permission:data,
                    token:getToken()
                }),
                success:function(r){
                    if(r.code==100000){
                        tips('设置角色权限',r);
                        setTimeout(function(){
                            window.location.reload();
                        },2000)
                    }else{
                        tips('设置角色权限',r);
                    }
                }
            })
        })
    });
</script>

</html>